<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      display: flex;
      margin: 100px;
      color: rgb(157, 152, 236);
    }

    #box div {
      padding: 20px;
      border: 1px solid #eee;
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="title">距离限时秒杀还有</div>
    <div id="day"></div>
    <div id="hours"></div>
    <div id="minute"></div>
    <div id="second"></div>
  </div>
  <script>
    /* 限时秒杀
     * - 指定限时秒杀的结束时间，及其对应的毫秒数。
     * - 获取当前时间的毫秒数。
     * - 计算当前与秒杀结束的时间差，大于0，计算剩余的天时分秒；否则结束秒杀。
     * - 利用定时器完成秒杀的倒计时功能。
     * - 利用两位数字显示秒杀的时间。
    */
    var _endtime = (new Date('2022-04-21 20:00:00')).getTime();
    var _day = _hour = _minute = _second = 0;
    var secondskill = setInterval(seckill, 1000);
    function seckill() {
      var gain = parseInt((_endtime - ((new Date().getTime()))) / 1000);
      if (gain > 0) {
        _day = zeroFill(parseInt((gain / (60 * 60 * 24))));
        _hour = zeroFill(parseInt((gain / (60 * 60) % 24)));
        _minute = zeroFill(parseInt((gain / 60 % 60)));
        _second = zeroFill(parseInt((gain % 60)));
      } else {
        clearInterval(secondskill);
        _day = _hour = _minute = _second = '00';
        // document.getElementById('box').innerHTML = '秒杀结束';
      }
      document.getElementById('day').innerHTML = _day + '天';
      document.getElementById('hours').innerHTML = _hour + '时';
      document.getElementById('minute').innerHTML = _minute + '分';
      document.getElementById('second').innerHTML = _second + '秒';
    }
    function zeroFill(num) {
      return num < 10 ? '0' + num : num;
    }

  </script>
</body>

</html>